<template>
  <div class="import-flow route-page">
    <section class="header">
      <a-page-header title="导入线索" @back="goBack">
        <template #extra>
          <a-button
              key="2"
              type="primary"
              ghost
              @click="editTemplate"
              v-if="currentStep == 0"
          >线索模板管理
          </a-button
          >
          <!-- <a-button key="1" type="primary" ghost @click="toFlowRecord"
            >查看导入记录</a-button
          > -->
        </template>
      </a-page-header>
    </section>
    <section class="content">
      <a-card style="min-height: 100%">
        <!-- <a-alert
          message="【企业客户将银行流水上传】银行流水通过自定义模板匹配系统项，建立银行流水Excel行列与系统项的对应关系"
          type="info"
          closable
        /> -->

        <!-- step -->
        <a-row class="mt-20">
          <a-col :span="12" :offset="6">
            <a-steps :current="currentStep" style="margin-top: 20px">
              <a-step
                  v-for="item in steps"
                  :key="item.title"
                  :title="item.title"
              />
            </a-steps>
          </a-col>
        </a-row>

        <!-- 内容区域 -->
        <div v-if="spinning" class="spinning-wrap">
          <a-spin size="large"/>
        </div>
        <template v-else-if="currentStep == 0">
          <a-row class="mt-20">
            <a-col :span="12" :offset="6">
              <a-form style="margin-top: 20px">
                <a-form-item
                    label="导入文件"
                    v-bind="validateInfos.template_path"
                >
                  <a-upload-dragger
                      v-model:fileList="fileList"
                      name="file"
                      :multiple="false"
                      :action="$utils.fileAction"
                      :headers="{ 'org-token': $store.getters.token }"
                      :showUploadList="false"
                      @change="handleUploadChange"
                      accept=".xlsx"
                      :key="uploadKey"
                  >
                    <template v-if="fileList.length">
                      <p class="ant-upload-drag-icon">
                        <FileTextOutlined/>
                      </p>
                      <p class="ant-upload-text">
                        {{ fileList[0].name }}
                      </p>
                    </template>
                    <template v-else>
                      <p class="ant-upload-drag-icon">
                        <InboxOutlined/>
                      </p>
                      <p class="ant-upload-text">
                        拖拽文件至虚线款内或点击此区域上传文件
                      </p>
                      <p class="ant-upload-hint">
                        文档只支持XLSX 工作表 (.xlsx)
                      </p>
                    </template>
                  </a-upload-dragger>
                </a-form-item>

                <a-form-item>
                  <a-alert type="warning">
                    <template #description>
                      <p>
                        1、文件必须为xlsx格式(如果为xls格式请另存为xlsx格式)
                      </p>
                      <p>
                        2、线索的必填字段为【姓名】、【号码】、【意向项目】和【意向楼宇】，没有则该条数据会导入失败
                      </p>
                      <p>3、同一个客户，在一个单元格里不支持填入多个手机号</p>
                      <p>4、尽量避免合并单元格，否则导入可能存在异常</p>
                      <p>5、文件内容不能包含公式，否则可能影响导入结果</p>
                    </template>
                  </a-alert>
                </a-form-item>

                <a-form-item
                    label="线索模板"
                    v-bind="validateInfos.template_id"
                >
                  <a-select
                      v-model:value="formRef.template_id"
                      :options="
                      templateList.map((item) => ({
                        label: item.name,
                        value: item.id,
                        item: item,
                      }))
                    "
                      optionLabelProp="label"
                      allowClear
                      @change="onTemplateIdChange"
                      :dropdownStyle="{ zIndex: 999 }"
                  >
                    <template #option="{ value: val, label }">
                      <div
                          style="
                          display: flex;
                          justify-content: space-between;
                          align-items: center;
                          padding-right: 10px;
                        "
                      >
                        <div>{{ label }}</div>
                        <EyeOutlined @click.stop="editTemplate(val)"/>
                      </div>
                    </template>
                    <template #dropdownRender="{ menuNode: menu }">
                      <v-nodes :vnodes="menu"/>
                      <a-divider style="margin: 4px 0"/>
                      <a-row
                          justify="center"
                          @click="editTemplate(-1)"
                          @mousedown="(e) => e.preventDefault()"
                          style="cursor: pointer"
                      >
                        <a-button type="link">
                          <template #icon>
                            <PlusOutlined/>
                          </template>
                          新增模板
                        </a-button>
                      </a-row>
                    </template>
                  </a-select>
                </a-form-item>
                <!-- <a-form-item
                  label="是否自动匹配账单"
                  v-bind="validateInfos.auto_match"
                >
                  <a-radio-group
                    v-model:value="formRef.auto_match"
                    @change="onMatchChange"
                  >
                    <a-radio :value="1">匹配</a-radio>
                    <a-radio :value="2">不匹配</a-radio>
                  </a-radio-group>
                </a-form-item> -->
              </a-form>
              <a-row class="mt-20" justify="center">
                <a-button
                    type="primary"
                    @click="nextStep"
                    :loading="step1Loading"
                    :disabled="step1Disabled"
                >
                  下一步
                </a-button>
              </a-row>
            </a-col>
          </a-row>
        </template>
        <template v-else-if="currentStep == 1 || currentStep == 2">
          <a-row class="mt-20" justify="center">
            <a-col :span="24" style="display: flex; justify-content: center">
              <div class="template-table">
                <div class="template-table-name">
                  {{ currentTemplateName }}
                  <span class="template-table-name-tip">
                    备注：红色字体为必填项
                  </span>
                </div>
                <div class="template-table-content">
                  <div class="template-table-head">
                    <div
                        v-for="(item, index) of currentTemplateHead"
                        :key="index"
                        class="template-table-head-item"
                        :style="{
                        width:
                          index == currentTemplateHead.length - 1 &&
                          currentStep == 1
                            ? '453px'
                            : '150px',
                        minWidth:
                          index == currentTemplateHead.length - 1 &&
                          currentStep == 1
                            ? '453px'
                            : '150px',
                        flex:
                          currentTemplateHead.length <= 8 ||
                          (index == currentTemplateHead.length - 1 &&
                            currentStep == 2)
                            ? 1
                            : '',
                        color:
                        ['contact_name', 'contact_phone', 'village_name', 'build_name', 'expect_area_min', 'expect_area_max', 'match_line'].includes(item.key)
                            ? 'red'
                            : '',
                      }"
                    >
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="template-table-body">
                    <div
                        class="template-table-line"
                        v-for="(item, index) of currentTemplateBody"
                        :key="index"
                    >
                      <template
                          v-if="item.matchedData && item.matchedData.length > 0"
                      >
                        <div
                            v-for="(item, index) of item.matchedData"
                            :key="index"
                            class="template-table-body-item"
                            :style="{
                            flex: currentTemplateHead.length <= 8 ? 1 : '',
                          }"
                        >
                          <a-tooltip>
                            <template #title>{{ item }}</template>
                            {{ item }}
                          </a-tooltip>
                        </div>
                        <!-- 第二步 -->
                        <template v-if="currentStep == 1">
                          <div
                              class="template-table-body-item"
                              style="width: 453px; min-width: 453px"
                              :style="{
                              flex: currentTemplateHead.length <= 8 ? 1 : '',
                            }"
                          >
                            <span v-if="item.error">
                              <a-tooltip>
                                <template #title>
                                  {{ item.error }}
                                  <span
                                      style="color: #2681f3; cursor: pointer"
                                      v-if="item.clue_id"
                                      @click="toStreamDetail(item.clue_id)"
                                  >【查看】
                                  </span>
                                </template>
                                {{ item.error }}
                                <span
                                    style="color: #2681f3; cursor: pointer"
                                    v-if="item.clue_id"
                                    @click="toStreamDetail(item.clue_id)"
                                >【查看】
                                </span>
                              </a-tooltip>
                            </span>
                          </div>
                        </template>
                        <!-- 第三步 -->
                        <template v-if="currentStep == 2">
                          <div
                              class="template-table-body-item"
                              :style="{
                              flex: currentTemplateHead.length <= 10 ? 1 : '',
                            }"
                          >
                            <span
                                v-if="item.clue_id && !item.error"
                                style="color: #52c41a"
                            >
                              成功；
                              <span
                                  style="cursor: pointer"
                                  @click="toStreamDetail(item.clue_id)"
                              >【查看线索详情】
                              </span>
                            </span>
                            <span style="color: red" v-else>失败</span>
                          </div>
                        </template>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>

            <div style="width: 453px; min-width: 453px" v-if="currentStep == 1">
              <a-col :span="24">
                <a-form-item
                    label="关联渠道"
                    name="channel_id"
                    v-bind="validateInfos.channel_id"
                >
                  <a-select
                      v-model:value="formRef.channel_id"
                      placeholder="请选择"
                      :options="chanelList"
                      @change="channelChange"
                  >
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="24" v-if="currentStep == 1 && isManage&&is_have_team_id">
                <a-form-item label="跟进人员">
                  <span>{{ team_user_name }}</span>
                </a-form-item>
              </a-col>
              <a-col :span="24" v-if="currentStep == 1 && isManage&&!is_have_team_id">
                <a-form-item label="跟进人员">
                  <a-radio-group
                      v-model:value="formRef.operate_type"
                      size="small"
                  >
                    <a-radio :value="1"
                    ><span style="font-size: 12px">指定人员</span></a-radio
                    >
                    <a-radio :value="2"
                    ><span style="font-size: 12px">加入公海</span></a-radio
                    >
                    <a-radio :value="3"
                    ><span style="font-size: 12px">平均分配</span></a-radio
                    >
                    <a-radio :value="4"
                    ><span style="font-size: 12px"
                    >分配给创建人</span
                    ></a-radio
                    >
                  </a-radio-group>
                  <template v-if="formRef.operate_type == 1" class="m-t-10">

                    <a-cascader
                        style="margin-top: 10px"
                        v-model:value="formRef.user_id"
                        :options="groupOptions"
                        :load-data="getTeamList"
                        placeholder="选择分配人员"
                    />

                    <!-- <a-row class="mt-10 user-tag" align="middle">
                      <a-tag
                        closable
                        v-for="(user, index) of idList.user"
                        :key="user.uid"
                        @close="idListRemove('user', index, user.uid)"
                        style="margin: 5px 10px 5px 0"
                      >
                        <a-avatar
                          :src="user.avatar"
                          style="color: #fff; background-color: #2681f3"
                        >
                          <template #icon>
                            <UserOutlined />
                          </template>
                        </a-avatar>
                        <span class="ml-10"> {{ user.realname }} </span>
                      </a-tag>
                      <a-button type="link" @click="chooseMember"
                        >添加</a-button
                      >
                    </a-row>-->
                  </template>
                </a-form-item>
              </a-col>
            </div>

            <a-col
                :span="24"
                style="display: flex; justify-content: center; margin-top: 20px"
                v-if="currentStep == 1"
            >
              <a-button @click="currentStep = 0"> 上一步</a-button>
              <a-button
                  type="primary"
                  @click="submitImport"
                  :loading="step2Loading"
                  style="margin-left: 20px"
              >
                生成线索
              </a-button>
            </a-col>
            <a-col
                :span="24"
                style="display: flex; justify-content: center; margin-top: 20px"
                v-if="currentStep == 2"
            >
              <a-button type="primary" @click="goBack"> 确定</a-button>
            </a-col>
          </a-row>
        </template>
      </a-card>
    </section>

    <ClueTemplateManage
        :visible="editTemplateVisible"
        :id="editTemplateId"
        @onClose="editTemplateVisible = false"
        @refresh="onFlowTemplateModalChange"
    />

    <!--线索详情 -->
    <ClueDetail
        :visible="detailVisible"
        :id="detailId"
        @closeDetail="() => (detailVisible = false)"
    />
  </div>
</template>

<script>
import {
  defineComponent,
  onBeforeUnmount,
  reactive,
  ref,
  toRaw,
  toRefs,
  watch,
} from "vue";
import {useRouter, useRoute} from "vue-router";
// import { PlusOutlined } from "@ant-design/icons-vue";
import {Form, message} from "ant-design-vue";
import store from "../../../store";
import request from "../../../common/utils/request";
import moment from "moment";
import ClueTemplateManage from "./modules/ClueTemplateManage.vue";
import ClueDetail from "./modules/ClueDetail.vue";
import {
  FileTextOutlined,
  InboxOutlined,
  EyeOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";

const useForm = Form.useForm;
const dateFormatStr = "YYYY-MM-DD";

export default defineComponent({
  name: "importClue",
  components: {
    FileTextOutlined,
    InboxOutlined,
    EyeOutlined,
    PlusOutlined,
    ClueDetail,
    VNodes: (_, {attrs}) => {
      return attrs.vnodes;
    },
    ClueTemplateManage,
  },
  setup() {
    const $router = useRouter();
    const $route = useRoute();
    const goBack = () => {
      state.currentStep = 0;
      resetFields();
      checkStep1Form();
      state.fileList = [];
      state.currentTemplateName = "";
      state.currentTemplateHead = [];
      state.currentTemplateBody = [];
      $router.back();
    };

    const state = reactive({
      steps: [
        {
          title: "上传文件",
          content: "",
        },
        {
          title: "生成线索",
          content: "",
        },
        {
          title: "结果反馈",
          content: "",
        },
      ],
      currentStep: 0,

      fileList: [],
      templateList: [],

      editTemplateId: 0,
      editTemplateVisible: false,

      step1Loading: false,
      step1Disabled: true,
      step2Loading: false,

      currentTemplateName: "", //当前选用导入的模板名称
      currentTemplateHead: [], //预览模板的表头
      currentTemplateBody: [], //预览模板的表内容
      templateContent: [], //模板内容

      spinning: false,
      uploadKey: 0,
      chanelList: [],
      isManage: false,
      is_have_team_id: false,
      team_user_name: ""
    });

    const formRef = reactive({
      template_path: "",
      template_id: null,
      // auto_match: null,
      operate_type: 1,
      user_id: undefined,
      channel_id: undefined,
    });

    const ruleRef = reactive({
      template_path: [{required: true, message: "必填项"}],
      template_id: [{required: true, message: "必填项"}],
      channel_id: [{required: false, message: "必填项"}],

      // auto_match: [{ required: true, message: "必填项" }],
    });

    const {resetFields, validate, validateInfos} = useForm(formRef, ruleRef);

    // 请求模板列表
    const getTemplateList = (refresh) => {
      request.get("/org", "/investmentTemplate/templateList").then((res) => {
        state.templateList = res.list;
        if (res.list.length == 1) {
          formRef.template_id = res.list[0].id;
          state.currentTemplateName = res.list[0].name;
          state.templateContent = res.list[0].content;
        }

        // 模板列表变化时，匹配并更新当前选中项
        let currentTemplateInList = false;
        if (refresh && formRef.template_id) {
          res.list.forEach((item) => {
            if (item.id == formRef.template_id) {
              currentTemplateInList = true;
              onTemplateIdChange(item.id, {item: item});
            }
          });
        }
        // 如果当前选中模板不在列表中，说明被删除，需要手动删除已选中，重新选择
        if (refresh && !currentTemplateInList) {
          formRef.template_id = null;
          state.currentTemplateName = "";
          state.currentTemplateHead = [];
          state.templateContent = [];
          checkStep1Form();
        }
      });
    };

    // 新增、编辑模板
    const editTemplate = (id) => {
      state.editTemplateId = 0;
      if (id && (id > 0 || id == -1)) {
        state.editTemplateId = id;
      }
      state.editTemplateVisible = true;
    };

    //上传文件
    const handleUploadChange = (info) => {
      let resFileList = [...info.fileList];
      if (resFileList.length) {
        resFileList = resFileList.slice(-1);
        resFileList = resFileList.map((file) => {
          if (file.response) {
            if (file.response.code == 1000) {
              file.url = file.response.data.fileUrl;
              formRef.template_path = file.url;
            } else {
              message.warning(file.response.msg);
            }
          }
          return file;
        });
      } else {
        formRef.template_path = "";
      }
      state.fileList = resFileList;
      checkStep1Form();
    };

    const onTemplateIdChange = (value, option) => {
      state.currentTemplateName = option.item.name;
      state.templateContent = option.item.content;
      checkStep1Form();
    };

    const onMatchChange = () => {
      checkStep1Form();
    };

    const checkStep1Form = () => {
      //  formRef.template_path &&
      //   formRef.template_id &&
      //   formRef.auto_match >= 1
      if (formRef.template_path && formRef.template_id) {
        state.step1Disabled = false;
      } else {
        state.step1Disabled = true;
      }
    };

    // 下一步
    const nextStep = () => {
      state.step1Loading = true;
      state.spinning = true;
      request
          .post("/org", "/investmentTemplate/clue/templateImportVerify", {
            template_id: formRef.template_id,
            source_file: formRef.template_path,
            // channel_id: 6,
            // operate_type: 3,
            // status: formRef.auto_match,
          })
          .then((res) => {
            state.step1Loading = false;
            state.currentStep++;

            state.is_have_team_id = false
            state.team_user_name = ""

            // 1.处理表头
            let matchList = [];
            let content = JSON.parse(JSON.stringify(state.templateContent));
            content.forEach((item) => {
              // 字母A-Z转换成对应的code值

              if (item.key != "match_line" && item.row) {
                item.rowCode = item.row.charCodeAt() - 65;
                matchList.push(item);
              }
            });
            let result = [];
            // 按字母A-Z从小到大排序
            matchList.sort((a, b) => {
              return a.rowCode - b.rowCode;
            });
            result = result.concat(matchList);
            result.push({
              key: "result",
              name: "匹配结果",
            });
            state.currentTemplateHead = result;

            console.log(result, "result");
            console.log(res, "res");

            //2.根据表头找到对应的每一列数据
            if (res.response_params && res.response_params.logList) {
              res.response_params.logList.forEach((item) => {
                if (item.data) {
                  item.matchedData = [];

                  state.currentTemplateHead.forEach((headItem) => {
                    if (headItem.rowCode >= 0) {
                      item.matchedData.push(item.data[headItem.rowCode]);
                    }
                  });
                }
              });
              state.currentTemplateBody = res.response_params.logList;
              state.spinning = false;
            }
          })
          .catch((err) => {
            console.log(err);
            state.step1Loading = false;
          });
    };

    // 前往导入记录
    const toFlowRecord = () => {
      // $router.push({ name: "billFlowImportRecord" });
    };

    // 查看线索详情
    const detailVisible = ref(false);
    const detailId = ref(0);
    const toStreamDetail = (clue_id) => {
      detailId.value = clue_id;
      detailVisible.value = true;
    };

    // 生成线索
    const submitImport = () => {
      validate().then(() => {
        if (!state.isManage) {
          formRef.operate_type = 0;
        }
        const param = {
          template_id: formRef.template_id,
          source_file: formRef.template_path,
          operate_type: formRef.operate_type,
          // status: formRef.auto_match,
        };
        if (formRef.channel_id) {
          param.channel_id = formRef.channel_id;
        }

        if (formRef.operate_type == 1 && formRef.user_id == undefined) {
          message.error("请选择指定用户");
          return;
        } else {
          state.step2Loading = true;
          state.spinning = true;
          if (state.is_have_team_id) {
            param.user_id = formRef.user_id;
            delete param.operate_type;
          } else {
            param.user_id = formRef.user_id ? formRef.user_id[1] : "";
            if (formRef.operate_type != 1) {
              delete param.user_id;
            }
          }
          request
              .post("/org", "/investmentTemplate/clue/templateImport", param)
              .then((res) => {
                state.step2Loading = false;
                state.currentStep++;

                //2.根据表头找到对应的每一列数据
                if (res.importResult && res.importResult.logId) {
                  getImportDetail(formRef.template_id, res.importResult.logId);
                }
              })
              .catch((err) => {
                state.step2Loading = false;
              });
        }
      });
    };

    //1招商领导 2招商专员
    const getRole = () => {
      request
          .get("/org", "/business/customerTeam/UserRoleInfo", {})
          .then((res) => {
            let level = store.getters.userInfo.level;
            if (res.role == 1 || level == 99) {
              state.isManage = true;
            } else {
              state.isManage = false;
            }
          });
    };
    // 导入详情
    const getImportDetail = (template_id, log_id) => {
      request
          .get("/org", "/investmentTemplate/clue/templateImportDetail", {
            template_id: template_id,
            log_id: log_id,
          })
          .then((res) => {
            if (
                res.logData &&
                res.logData.response_params &&
                res.logData.response_params.logList
            ) {
              console.log("00", res.logData.response_params.logList);
              res.logData.response_params.logList.forEach((item) => {
                if (item.data) {
                  item.matchedData = [];

                  state.currentTemplateHead.forEach((headItem) => {
                    if (headItem.rowCode >= 0) {
                      console.log(headItem.name, item.data[headItem.rowCode]);
                      item.matchedData.push(item.data[headItem.rowCode]);
                    }
                  });
                }
              });
              console.log("11", state.currentTemplateBody);
              state.currentTemplateBody = res.logData.response_params.logList;
              console.log("22", state.currentTemplateBody);
              state.spinning = false;
            }
          });
    };

    // 模板列表变化时
    const onFlowTemplateModalChange = () => {
      getTemplateList(true);
    };

    // 请求模板详情
    const getTemplateDetail = (template_id, log_id) => {
      if (template_id && log_id) {
        state.spinning = true;
        request
            .get("/org", "/stream/templateDetail", {
              id: template_id,
            })
            .then((res) => {
              if (res.detail && res.detail.content) {
                // 1.处理表头
                let matchList = [];
                res.detail.content.forEach((item) => {
                  // 字母A-Z转换成对应的code值
                  if (item.key != "match_line" && item.row) {
                    item.rowCode = item.row.charCodeAt() - 65;
                    matchList.push(item);
                  }
                });
                let result = [];
                // 按字母A-Z从小到大排序
                matchList.sort((a, b) => {
                  return a.rowCode - b.rowCode;
                });
                result = result.concat(matchList);
                result.push({
                  key: "result",
                  name: "匹配结果",
                });
                state.currentTemplateName = res.detail.name;
                state.currentTemplateHead = result;

                //2.根据表头找到对应的每一列数据
                getImportDetail(template_id, log_id);
              }
            });
      }
    };


    const channelChange = (e) => {
      const items = state.chanelList.filter(item => {
        return item.id == e
      })
      console.log(e, "11111111111")
      console.log(state.chanelList, "11111111111")
      if (items.length == 1) {
        const item = items[0]
        console.log(item)
        if (item.team_user_id > 0) {
          state.is_have_team_id = true;
          formRef.user_id = item.team_user_id
          state.team_user_name = item.team_user_name
        } else {
          state.is_have_team_id = false;
          formRef.user_id = undefined
          state.team_user_name = ""
        }
      }
    }


    // 获取渠道列表
    const getChannelList = () => {
      request
          .get("/org", "/business/customer/channel/index", {})
          .then((res) => {
            state.chanelList = res.list.map((item) => {
              return {
                ...item,
                value: item.id,
                label: item.name,
              };
            });
          });
    };

    const groupOptions = ref([]);
    const getGroupList = () => {
      request.post("/org", "/business/customerTeam/list").then(res => {
        // console.log(res)
        groupOptions.value = res.list.map(item => {
          return {
            label: item.name,
            value: item.id,
            isLeaf: false,
          }
        })
      })
    }

    const getTeamList = (selectedOptions) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      // console.log(targetOption)
      request.get("/org", "/business/customerTeam/teamUserIndex", {team_id: targetOption.value}).then(res => {
        console.log(res)
        targetOption.loading = false;
        targetOption.children = [];
        targetOption.children = res.data.map(item => {
          return {
            label: item.name,
            value: item.uid
          }
        })
        groupOptions.value = [...groupOptions.value];
      });
    }


    const init = () => {
      state.uploadKey = Math.random();
      setTimeout(() => {
        state.uploadKey = 0;
      }, 100);
      getTemplateList();
      getChannelList();
      getGroupList();
      getRole();
      if ($route.query.id && $route.query.template_id) {
        state.currentStep = 2;
        getTemplateDetail($route.query.template_id, $route.query.id);
      }
    };

    init();

    return {
      ...toRefs(state),
      goBack,
      formRef,
      validateInfos,
      editTemplate,
      handleUploadChange,
      onTemplateIdChange,
      onMatchChange,
      nextStep,
      toFlowRecord,
      toStreamDetail,
      submitImport,
      onFlowTemplateModalChange,
      detailVisible,
      detailId,
      groupOptions,
      getTeamList,
      channelChange
    };
  },
});
</script>

<style lang="less" scoped>
.import-flow {
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    height: 50px;
    background: #fff;

    &:deep(.ant-page-header) {
      padding: 10px 20px;
    }
  }

  &.back-class {
    :deep(.ant-page-header-back) {
      display: none;
    }
  }

  .content {
    flex: 1;
    padding: 10px;
    margin: 10px 0;
    max-height: 100%;
    overflow-y: auto;

    .template-table {
      width: 100%;
      margin: 20px 0;

      .template-table-name {
        text-align: center;
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        background-color: #305496;
        color: #fff;
        position: relative;
        padding: 0 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .template-table-name-tip {
          position: absolute;
          right: 10px;
          bottom: 10px;
          color: red;
          font-size: 12px;
          height: 12px;
          line-height: 12px;
        }
      }

      .template-table-content {
        overflow-x: auto;

        .template-table-head {
          // width: 100%;
          height: 40px;
          line-height: 40px;
          display: flex;
          font-size: 12px;

          .template-table-head-item {
            // flex: 1;
            text-align: center;
            padding: 0 10px;
            border-top: 1px solid #eee;
            border-right: 1px solid #eee;
            background-color: #f5f5f5;
            width: 150px;
            min-width: 150px;
          }

          .template-table-head-item:first-child {
            border-left: 1px solid #eee;
          }
        }

        .template-table-body {
          font-size: 12px;
          max-height: 401px;

          .template-table-line {
            // width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;

            .template-table-body-item {
              // flex: 1;
              text-align: center;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              padding: 0 10px;
              border-top: 1px solid #eee;
              border-right: 1px solid #eee;
              width: 150px;
              min-width: 150px;
            }

            .template-table-body-item:first-child {
              border-left: 1px solid #eee;
            }
          }

          .template-table-line:last-child {
            .template-table-body-item {
              border-bottom: 1px solid #eee;
            }
          }
        }
      }
    }

    .spinning-wrap {
      width: 100%;
      height: 400px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
